<!--
 * @Description: 
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-27 00:56:31
-->
<template>

    <div>
        <el-container class="container">
            <el-header class="header">Router Study XM</el-header>
            <el-container>
                <el-aside class="aside">
                    <router-link to="/1th">第一章入门</router-link>
                    <router-link to="/2th">第二章-命名路由-编程式导航</router-link>
                    <router-link to="/3th">第三章-历史记录</router-link>
                    <router-link to="/4th">第四章-路由传参</router-link>
                    <router-link to="/6th">第六章-命名视图</router-link>
                    <router-link to="/7th">第七章-重定向-别名</router-link>
                    <router-link to="/9th">第九章-路由元信息</router-link>
                    <router-link to="/10th">第十章-路由过渡动效</router-link>
                    <router-link to="/11th">第十一章-滚动行为</router-link>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-scrollbar height="100vh" >
                            <router-view #default="{ route, Component }">
                                <transition :enter-active-class="`animate__animated ${route.meta?.transition}`">
                                    <component :is="Component"></component>
                                </transition>
                            </router-view>
                        </el-scrollbar>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>

</template>
<script setup lang="ts">
import 'animate.css';
</script>
<style scoped lang="less">
.container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .header {
        border-bottom: 1px solid #ccc;
    }

    .aside {
        width: 300px;
        min-height: 100%;
        border-right: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
}
</style>